<template>
  <div>
    <el-container>
      <el-main>
        <el-row :gutter="15">
          <el-form
            ref="elForm"
            :model="formData"
            :rules="rules"
            size="medium"
            label-width="100px"
            label-position="left"
          >
            <el-col :span="24">
              <el-form-item label="姓名" prop="name">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入姓名"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="手机号" prop="mobile">
                <el-input
                  v-model="formData.mobile"
                  placeholder="请输入手机号"
                  :maxlength="11"
                  show-word-limit
                  clearable
                  prefix-icon="el-icon-mobile"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label=" 身份证正面" prop="field116" >
                <el-upload
                  ref="field116"
                  :file-list="field116fileList"
                  :action="field116Action"
                  :before-upload="field116BeforeUpload"
                >
                  <el-button size="small" type="primary" icon="el-icon-upload"
                    >点击上传</el-button
                  >
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label=" 身份证反面" prop="field117" >
                <el-upload
                  ref="field117"
                  :file-list="field117fileList"
                  :action="field117Action"
                  :before-upload="field117BeforeUpload"
                >
                  <el-button size="small" type="primary" icon="el-icon-upload"
                    >点击上传</el-button
                  >
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="贷款金额" prop="loanAmount">
                <el-input-number
                  v-model="formData.loanAmount"
                  placeholder="贷款金额"
                  :precision="1"
                >
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="贷款期限" prop="loanTerm">
                <el-date-picker
                  v-model="formData.loanTerm"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :style="{ width: '100%' }"
                  placeholder="请选择贷款期限"
                  clearable
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="还款方式" prop="repaymentMethod">
                <el-radio-group v-model="formData.repaymentMethod" size="medium">
                  <el-radio
                    v-for="(item, index) in repaymentMethodOptions"
                    :key="index"
                    :label="item.value"
                    :disabled="item.disabled"
                    >{{ item.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="贷款用途" prop="loanPurpose">
                <el-input
                  v-model="formData.loanPurpose"
                  type="textarea"
                  placeholder="请说说您的贷款用途～"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item size="large">
                <el-button type="primary" @click="isValied">提交申请</el-button>
                <el-button @click="resetForm">重置</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <el-dialog title="恭喜" :visible.sync="showDialog" width="30%">
          <span>您的贷款申请已提交!</span>
          <span>我们的客服将在24小时内与您联系</span>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { Dialog } from "element-ui";

export default {
  components: {},
  props: [],
  data() {
    return {
      showDialog: false,
      formData: {
        loanAmount: undefined,
        mobile: "",
        field116: null,
        field117: null,
        loanAmount: undefined,
        loanTerm: null,
        repaymentMethod: undefined,
        loanPurpose: undefined,
        field119: "",
      },
      rules: {
        loanAmount: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,
            message: "手机号格式错误",
            trigger: "blur",
          },
        ],
        loanAmount: [
          {
            required: true,
            message: "贷款金额",
            trigger: "blur",
          },
        ],
        loanTerm: [
          {
            required: true,
            message: "请选择贷款期限",
            trigger: "change",
          },
        ],
        repaymentMethod: [
          {
            required: true,
            message: "还款方式不能为空",
            trigger: "change",
          },
        ],
        loanPurpose: [
          {
            required: true,
            message: "请说说您的贷款用途～",
            trigger: "blur",
          },
        ],
      },
      field116Action: "https://jsonplaceholder.typicode.com/posts/",
      field116fileList: [],
      field117Action: "https://jsonplaceholder.typicode.com/posts/",
      field117fileList: [],
      repaymentMethodOptions: [
        {
          label: "等额本息",
          value: 1,
        },
        {
          label: "等额本金",
          value: 2,
        },
        {
          label: "先息后本",
          value: 3,
        },
        {
          label: "一次性还本付息",
          value: 4,
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    //校验
    isValied() {
      this.$refs['elForm'].validate(valid => {
      if (valid) {
        // 所有验证通过，显示对话框
        this.showDialog = true;
        
        // 这里可以添加实际提交表单的逻辑
        // this.submitLoanApplication();
      } else {
        // 验证失败，不显示对话框
        return false;
      }
    });
    },
    field116BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2;
      if (!isRightSize) {
        this.$message.error("文件大小超过 2MB");
      }
      return isRightSize;
    },
    field117BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2;
      if (!isRightSize) {
        this.$message.error("文件大小超过 2MB");
      }
      return isRightSize;
    },
  },
};
</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}
</style>
